<template>
  <div class="home">
    <button @click="paintChart">绘制图表</button>
    <button @click="changeSize">改变图表大小</button>
    <button @click="mockData">模拟异步请求数据</button>

    <div id="box" ref="box" class="box" v-show="isShow"></div>
  </div>
</template>

<script>
  //1.一次性加载echarts所有模块（消耗性能，不推荐）
  import * as echarts  from "echarts";

  //2.按需加载
  // import echarts from "../utils/mychart";

  export default {
    name: 'HomeView',
    data(){
        return {
            myChart : null,
            chartOption : {
                title: {
                    text: 'ECharts 入门示例'
                },
                tooltip: {},
                legend: {
                    data: ['销量']
                },
                xAxis: {
                    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
                },
                yAxis: {},
                series: [
                    {
                        name: '销量',
                        type: 'bar',
                        data: [5, 20, 36, 10, 10, 20]
                    }
                ]
            },
            isShow : false
        }
    },
      methods : {
          paintChart(){
              this.myChart = echarts.init(this.$refs.box);  // 推荐用父容器来控制Echarts的大小
             /* this.myChart = echarts.init(this.$refs.box,null,{     // Echarts初始化
                  width : 600,
                  height : 500
              });*/
              this.myChart.setOption(this.chartOption);
              this.isShow = true;

              //【面试：响应容器大小的变化】通过监听页面的resize事件获取浏览器大小改变事件，然后调用 echartsInstance.resize 改变图表的大小
              window.addEventListener("resize", this.resize)
          },
          resize(){
              this.myChart.resize();  // 让图表响应式变化
          },
          changeSize(){
              if(this.myChart){
                  this.myChart.resize({
                      width : 600,
                      height: 400
                  })
              }else{
                  alert("请先绘制图表")
              }
          },
          mockData(){
              if(this.myChart){
                  setTimeout(()=>{  // 易错：箭头函数
                      let res = {
                          name: '数量',
                          type: 'bar',
                          data: [50, 10, 36, 20, 40, 20]
                      }
                      this.chartOption.series[0] = res;
                      this.chartOption.legend.data[0] = res.name;
                      this.myChart.setOption(this.chartOption); // 触发响应式变化
                  },3000)
              }else{
                alert("请先绘制图表")
              }
          }
      },
      beforeDestroy(){
          window.removeEventListener('resize', this.resize);  // 离开组件时需要移除在window上绑定的自定义事件
          if(this.myChart)
            this.myChart.dispose();  // 离开组件时，需要销毁echarts实例释放资源，避免内存泄漏
      }
  }
</script>

<style>
  .box {
    width: 80vw;  /*echarts的容器单位建议使用vw vh*/
    height: 550px;
    min-width: 700px;
    box-shadow: 1px 1px 10px #333;
    margin: 20px auto;
    padding: 20px;
    box-sizing: border-box;
  }
</style>